<template>
  <div id="main">
    <div class="left">
      <Panel title="运营统计" class="card">
        <template #content>
          <OperationStatistics />
        </template>
      </Panel>
      <Panel title="地铁活动" class="card">
        <template #content>
          <SubwayAactivities />
        </template>
      </Panel>
      <Panel title="客流指标" class="card">
        <template #content>
          <PassengerFlow />
        </template>
      </Panel>
    </div>

    <div class="right">
      <Panel title="线路概览" class="card">
        <template #content>
          <LinesOverview />
        </template>
      </Panel>
      <Panel title="告警趋势" class="card">
        <template #content>
          <AlarmTrend />
        </template>
      </Panel>
      <Panel title="实时影像" class="card">
        <template #content>
            <HlsLive></HlsLive>
        </template>
      </Panel>
    </div>
  </div>
</template>

<script setup>
import Panel from './Panel.vue'
import OperationStatistics from './OperationStatistics.vue'
import SubwayAactivities from './SubwayAactivities.vue'
import PassengerFlow from './PassengerFlow.vue'
import LinesOverview from './LinesOverview.vue'
import AlarmTrend from './AlarmTrend.vue'
import HlsLive from './HlsLive.vue'
import router from '@/router';
import { watch } from 'vue';
watch(router.currentRoute, (newVal, oldVal) => {
  console.log(newVal.fullPath, oldVal,'mainrouter')
  const dom = document.getElementById('main');
  if (newVal.fullPath === '/station') {
    dom.style.display = 'none';
  }else{
    dom.style.display = 'flex';
  }
});
</script>

<style scoped>
#main {
  position: absolute;
  top: 57px;
  left: 0;
  color: white;
  position: relative;
  width: 100%;
  height: calc(100% - 130px);
  padding: 0 0.833vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .left,.right{
    width: 27%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    .card{
      flex: 1;
    }
  }
}
</style>
